<template>
    <div style="display: inline-block; width: 280px; cursor: pointer; position: relative" @mouseenter="showThis" @mouseleave="showOut">
        <el-col style="width: 252px;" >
            <el-card shadow="hover">
<!--                <span class="showDes">{{showDes}}</span>-->
                <img :src="imgUrl" height="124" width="220"/>
                <dvi class="video-dec">
                   {{title}}
                </dvi>
                <div class="video-bu">
                    <div class="author">
                        <img :src="headUrl" height="30" width="30" style="border-radius: 50%"/>
                        <span>{{upName}}</span>
                    </div>
                    <span  class="money2"><span v-if="showall&&payVideo">¥</span>{{desMoney}}</span>
                    <div class="video-play-num">
                        <svg t="1610352162833" class="icon pointNum" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3926" width="200" height="200"><path d="M512 63.015385C263.876923 63.015385 63.015385 263.876923 63.015385 512S263.876923 960.984615 512 960.984615c248.123077 0 448.984615-200.861538 448.984615-448.984615S760.123077 63.015385 512 63.015385z m0 838.892307c-212.676923 0-389.907692-173.292308-389.907692-389.907692S299.323077 122.092308 512 122.092308s389.907692 173.292308 389.907692 389.907692-177.230769 389.907692-389.907692 389.907692z" fill="#8a8a8a" p-id="3927"></path><path d="M484.430769 334.769231c-7.876923-3.938462-15.753846-7.876923-23.630769-7.876923-19.692308 0-35.446154 15.753846-35.446154 35.446154v299.323076c0 7.876923 3.938462 15.753846 7.876923 23.63077 11.815385 15.753846 35.446154 19.692308 51.2 7.876923l196.923077-149.661539c7.876923-7.876923 15.753846-19.692308 15.753846-31.507692 0-11.815385-3.938462-23.630769-15.753846-31.507692l-196.923077-145.723077z m-3.938461 287.507692v-224.492308L630.153846 512l-149.661538 110.276923zM697.107692 512z" fill="#8a8a8a" p-id="3928"></path></svg>
                        <span class="num">{{views}}</span>
                        <svg t="1610351827691" class="icon views" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2688" width="200" height="200"><path d="M739.7 899.7H435.1c-7.6 0-13.8-6.2-13.8-13.8s6.2-13.8 13.8-13.8h304.6c10.1 0 19-6.8 21.5-16.6l88.4-341.6c2.1-8.2 0.4-16.6-4.7-23.2-5.1-6.6-12.8-10.4-21.1-10.4h-225c-17.7 0-33.7-9-42.7-24.2-9.1-15.3-9.5-33.9-1-49.6 11.8-21.9 19.1-43.4 21.8-63.8 5.5-43.1 6.5-121.3-6.2-155.9-5.7-16.1-11.3-31.6-38-33.3-29.7 2.3-34.1 20.1-37 31.9-2 8.2-4.1 17.6-6.3 27.9-9 41.2-21.4 97.5-44.6 138.1-44.5 77.6-143.1 124.9-146.2 126.9-6.4 4-15 2.2-19.1-4.2-4.1-6.5-2.2-15 4.2-19.1 0.7-0.5 96.1-45.7 137.1-117.3 21.2-36.9 33-90.9 41.6-130.3 2.3-10.5 4.4-20.2 6.5-28.5 3.3-13.4 12-49 63.7-52.9 46.7 2.9 57.9 34.2 63.3 49.3 17.2 47 13 135.3 8.4 171-3 23.8-11.4 48.5-24.9 73.4-3.8 7.1-3.7 15.5 0.4 22.3 4.1 6.8 11 10.7 19 10.7h225.1c16.9 0 32.6 7.7 43 21.1 10.4 13.4 13.8 30.5 9.6 46.9L788 862.2c-5.7 22.2-25.6 37.5-48.3 37.5z" fill="#8a8a8a" p-id="2689"></path><path d="M281.3 900.2h-92.1c-22.9 0-41.5-18.6-41.5-41.5V494.4c0-22.9 18.6-41.5 41.5-41.5h92.1c22.9 0 41.5 18.6 41.5 41.5v364.3c0 22.9-18.6 41.5-41.5 41.5z m-92.1-419.6c-7.6 0-13.8 6.2-13.8 13.8v364.3c0 7.6 6.2 13.8 13.8 13.8h92.1c7.6 0 13.8-6.2 13.8-13.8V494.4c0-7.6-6.2-13.8-13.8-13.8h-92.1z" fill="#8a8a8a" p-id="2690"></path></svg>
                        <span class="point">{{point}}</span>
                    </div>
                </div>
            </el-card>

        </el-col>
    </div>
</template>

<script>
    import {request} from "../../network/request";

    export default {
        name: "video-card",
        data(){
          return{
              headUrl:"",
              desMoney:"",
              dess:["", "vip视频", "付费"],
              showall:false,
              payVideo:false,
              show:false,
              des2:["", "vip", "付费"],
              showDes:"",

          }
        },
        props:{
            id:Number,
            title:String,
            url:String,
            collection:Number,
            views:Number,
            size:Number,
            type:String,
            time:String,
            upId:Number,
            upName:String,
            des:String,
            imgUrl:String,
            point:Number,
            jur:Number,
            pay:Number
        },
        created() {

            ///getImgUrl
            console.log(this.upId);
            request({
                url:"/getImgUrl",
                method: "post",
                params:{
                    userId:this.upId
                }
            }).then(res=>{

                console.log(res.data);
                this.headUrl = res.data;

            }).catch(err=>{
                console.log(err);
            });
            this.desMoney = this.dess[this.jur];
            this.showDes = this.des2[this.jur]
            if(this.jur != 0)
                this.showall = true;
            if(this.jur == 2){
                this.payVideo = true;
                this.desMoney = this.pay + "元";
            }
            if(this.jur == 0){
                this.desMoney = "免费";
            }

        },
        methods:{
            showThis(){
                this.show = true;
            },
            showOut(){
                this.show = false;
            }
        }

    }
</script>

<style scoped>
    .point{
        position: relative;
        top: 3px;
        left: 25px;
    }
    .views{
        width: 20px;
        height: 20px;
        position: relative;
        left: -10px;
    }
    .pointNum{
        width: 20px;
        height: 20px;
        position: relative;
        left: -40px;
    }
    .num{
        position: relative;
        left: -20px;
        top: 3px;
    }
    .video-dec{
        padding-top: 1px;
        width: 192px;
        position: relative;
        font-size: 15px;
        color: #20232c;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 48px;
        word-break: break-all;
        cursor: pointer;
        margin-top: 5px;
    }
    .video-dec:hover{
        color: #f40;
    }
    .video-bu{
        display: inline-block;
        margin-top: 10px;
        position: relative;
    }
    .money2{
        display: inline-block;
        position: absolute;
        width: 100px;
        top: 20px;
        left: 0px;
        color: #f4621f;
        font-size: 14px;
    }
    .money2 span{
        font-size: 14px;
    }
    .video-bu .author{
        color: #999;
        font-size: 14px;
        display: inline-block;
        position: relative;
        top: -20px;
        left: -5px;
    }
    .video-bu .author span{
        position: absolute;
        display: inline-block;
        width: 50px;
        margin-left: 10px;
        top: 10px;
    }
    .video-play-num{
        display: inline-block;
        position: relative;
        left: 130px;
        top: 8px;
    }
    .video-play-num span{
        font-size: 14px;
        color: #999;
        position: absolute;
        margin-left: 10px;
    }

</style>